<template>
  <div class="entry_box">
    <div class="openerweima clear_float" style="margin-top: -130px">
      <div class="openerweima_pic">
        <img
          data-src="//image.zlketang.com/public/news/images/guanwangPic/erweima/appCode.jpg"
          src="//image.zlketang.com/public/news/images/guanwangPic/erweima/appCode.jpg"
          class="img-w lazy"
          alt="之了课堂APP二维码"
        />
      </div>
      <div class="xiazai">下载之了课堂APP</div>
      <div class="xuexi">随时随地学习</div>
    </div>
    <ul class="login_list clear_float box">
      <li class="nine-list-item" id="kjsc_xkzx">
        <a
          class="login_list_item"
          :href="parseFullPath('/courses/7-0.html')"
          target="_blank"
        >
          <span class="login_list_item_postion">
            <span>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4334"></use>
              </svg>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4334"></use>
              </svg>
            </span>
          </span>
          选课中心
        </a>
      </li>
      <li id="dayi" class="nine-list-item rel">
        <div id="kjsc_course" class="icontag-hot">
          <svg
            class="icon"
            aria-hidden="true"
            style="width: 25px; height: 16px"
          >
            <use xlink:href="#icontag_hot"></use>
          </svg>
        </div>
        <a class="login_list_item" target="_blank">
          <span class="login_list_item_postion rel">
            <span class="dayi-icon-select"></span>
          </span>
          <span class="dayi-seclect-content">&nbsp;</span>
        </a>
      </li>
      <li class="nine-list-item" id="kjsc_teacher">
        <a
          class="login_list_item"
          :href="parseFullPath('/teachers/')"
          target="_blank"
        >
          <span class="login_list_item_postion">
            <span>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4338"></use>
              </svg>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4338"></use>
              </svg>
            </span>
          </span>
          之了名师
        </a>
      </li>
      <li class="nine-list-item" id="kjsc_zk">
        <a
          class="login_list_item"
          rel="nofollow"
          href="https://zhilefw.tmall.com/"
          target="_blank"
        >
          <span class="login_list_item_postion">
            <span>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4353"></use>
              </svg>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4353"></use>
              </svg>
            </span>
          </span>
          折扣活动
        </a>
      </li>

      <li id="sjxx" class="nine-list-item">
        <a class="login_list_item" target="_blank">
          <span class="login_list_item_postion">
            <span id="kjsc_mobile">
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4361"></use>
              </svg>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4361"></use>
              </svg>
            </span>
          </span>
          手机学习
        </a>
      </li>
      <li
        class="nine-list-item entry-contact-customer-service"
        id="kjsc_kefu"
        v-if="path !== 'kjsc'"
      >
        <a class="login_list_item" @click="clickDialog">
          <span class="login_list_item_postion">
            <span>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4360"></use>
              </svg>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4360"></use>
              </svg>
            </span>
          </span>
          联系客服
        </a>
      </li>
      <li class="nine-list-item" id="answer" v-if="path === 'kjsc'">
        <a
          class="login_list_item"
          :href="parseFullPath(`/${path}/answer/`)"
          target="_blank"
        >
          <span class="login_list_item_postion">
            <span>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4346"></use>
              </svg>
              <svg
                class="icon"
                aria-hidden="true"
                style="width: 26px; height: 26px"
              >
                <use xlink:href="#iconzu4346"></use>
              </svg>
            </span>
          </span>
          实操问答
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      path: 'kjsc'
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        $('#sjxx')
          .off()
          .click(function(e) {
            $('.openerweima').fadeToggle(300)
          })
        var onlineContactCustomerService = document.getElementsByClassName(
          'entry-contact-customer-service'
        )[0]
        if (onlineContactCustomerService) {
          onlineContactCustomerService.onclick = function() {
            var hasKefuUrl = false
            $('script').each(function(i, e) {
              if (
                e.src.indexOf(
                  '//tb.53kf.com/code/code/50a2979908c0d19e30713b76876476515/1'
                ) > -1
              ) {
                hasKefuUrl = true
              }
            })
            if (hasKefuUrl) return
            try {
              var _53code = document.createElement('script')
              _53code.src =
                'https://tb.53kf.com/code/code/50a2979908c0d19e30713b76876476515/1'
              var s = document.getElementsByTagName('script')[0]
              s.parentNode.insertBefore(_53code, s)
            } catch (error) {}
          }
        }
        // 下面动态配置九宫格，运营需求，
        var proArr = [
          '/cjkj/',
          '/zjkj/',
          '/cpa/',
          '/cta/',
          '/kjsc/',
          '/cma/',
          '/zjjjs/'
        ]
        var proMap = {
          '/cjkj/':
            '/vplay/free_course_play.html?course_id=5071&web_auth_id=32',
          '/zjkj/':
            'h/vplay/free_course_play.html?course_id=6154&web_auth_id=6153',
          '/cpa/':
            '/vplay/free_course_play.html?course_id=5258&web_auth_id=177',
          '/cta/': '/cta/course_detail/10717.html',
          '/kjsc/': '/vplay/free_course_play.html?course_id=361&subject_id=285',
          '/cma/':
            '/vplay/free_course_play.html?course_id=6330&web_auth_id=6332',
          '/zjjjs/':
            '/vplay/free_course_play.html?course_id=6556&web_auth_id=6546'
        }
        var current = proArr.filter(item => location.href.indexOf(item) !== -1)
        if (Array.isArray(current) && current.length) {
          $('#dayi .login_list_item').attr('href', proMap[current[0]])
          $('#dayi .dayi-icon-select').html(`
              <svg class="icon" aria-hidden="true" style="width: 26px;height: 26px">
                  <use xlink:href="#icontingke"></use>
              </svg>
              <svg class="icon" aria-hidden="true" style="width: 26px;height: 26px">
                  <use xlink:href="#icontingke"></use>
              </svg>
          `)
          $('.dayi-seclect-content').html('免费看课')
          $('.icontag-hot').show()
        } else {
          $('#dayi').addClass('common-dayi')
          $('.dayi-seclect-content').html('答疑中心')
          $('#dayi .dayi-icon-select').html(`
              <svg class="icon" aria-hidden="true" style="width: 26px;height: 26px">
                  <use xlink:href="#iconzu4346"></use>
              </svg>
              <svg class="icon" aria-hidden="true" style="width: 26px;height: 26px">
                  <use xlink:href="#iconzu4346"></use>
              </svg>
          `)
        }
      })
    },
    // 点击
    clickDialog() {
      window.open(
        '/dialog_1.htm',
        '',
        'height=499,width=712,top=0,left=0,toolbar=no,menubar=yes,scrollbars=yes,resizable=yes,location=no,status=no'
      )
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.init()
      }, 300)
    })
  }
}
</script>
<style scoped>
.entry_box {
  padding-top: 20px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  width: 260px;
  background: #ffffff;
  border: 2px solid #f1f1f1;
  opacity: 1;
}
.openerweima {
  width: 150px;
  height: 175px;
  box-shadow: 0.5px 0.866px 7px rgba(152, 9, 9, 0.07);
  box-sizing: border-box;
  border: 1px solid #c2d3d0;
  position: absolute;
  background-color: #ffffff;
  z-index: 9999;
  left: 50%;
  top: 23%;
  margin-left: -75px;
  margin-top: -155px;
  border-radius: 10px 10px 10px 10px;
  display: none;
}
.clear_float:after {
  content: '';
  display: table;
  clear: both;
}
.openerweima_pic {
  width: 100px;
  height: 100px;
  margin: 10px auto;
}
.img-w {
  width: 100%;
  height: auto;
}
.xiazai {
  color: #666666;
  font-size: 15px;
  margin: 0 auto;
  text-align: center;
}
.xuexi {
  color: #de1f0a;
  font-size: 12px;
  margin: 0 auto;
  width: 60%;
  text-align: center;
}
.newLogin {
  /* css-ignore */
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.person_pic {
  height: 52px;
  width: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
}
.mr15 {
  margin-right: 15px;
}
.welcome {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: #707070;
}
.btn_box {
  width: 100%;
  margin: 10px auto 0;
  text-align: center;
  height: 28px;
}

.btn_box a {
  width: 94px;
  height: 28px;
  font-size: 12px;
  display: inline-block;
  border: 1px solid #4c8dff;
  box-sizing: border-box;
  line-height: 27px;
  border-radius: 4px;
  color: #4c8dff;
  border-color: #ffffff;
  cursor: pointer;
}

.btn_box a:first-child {
  margin-right: 10px;
  border: 1px solid #ff8409;
  color: #ffffff;
  background-color: #ff8409;
}

.btn_box a:first-child:hover,
.btn_box a:last-child:hover {
  background-color: #f65516;
  box-shadow: 0px 3px 7px #cd3e06;
  border: 1px solid #f65516;
  color: #fff;
}

.btn_box a:last-child {
  margin: 0;
  border: 1px solid #4c8dff;
  color: #4c8dff;
  background-color: #ffffff;
}
.box {
  margin: 0 auto;
}
.login_list {
  padding: 0 6px 10px;
  box-sizing: border-box;
  font-size: 0;
}
.nine-list-item {
  cursor: pointer;
  width: 70px;
  height: 56px;
  display: inline-block;
  margin: 0 4px 10px;
  padding: 5px;
  background-color: #f3f3f3;
  text-align: center;
  box-sizing: border-box;
}

.nine-list-item:hover .login_list_item_postion span {
  -moz-transform: translateY(-28px);
  -webkit-transform: translateY(-28px);
  -o-transform: translateY(-28px);
  transform: translateY(-28px);
}
.login_list_item_postion span {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.login_list_item:hover {
  color: #ff8b07;
}
.login_list_item span {
  display: block;
}

.login_list_item_postion {
  height: 26px;
  width: 26px;
  margin: 0 auto 4px;
  overflow: hidden;
}

.login_list li:first-child .login_list_item_postion {
  background-position: 0 -154px;
}

.login_list li:nth-child(2) .login_list_item_postion {
  background-position: -36px -154px;
}

.login_list li:nth-child(3) .login_list_item_postion {
  background-position: -72px -154px;
}

.login_list li:nth-child(4) .login_list_item_postion {
  background-position: -180px -154px;
}

.login_list li:nth-child(5) .login_list_item_postion {
  background-position: -144px -154px;
}

.login_list li:nth-child(6) .login_list_item_postion {
  background-position: -108px -154px;
}

.login_list li:nth-child(7) .login_list_item_postion {
  background-position: -216px -154px;
}

.login_list li:nth-child(8) .login_list_item_postion {
  background-position: -252px -154px;
}

.login_list li:nth-child(9) .login_list_item_postion {
  background-position: -288px -154px;
}

.login_list_item {
  font-size: 12px;
  text-align: center;
  background-position: center 6px;
  background-repeat: no-repeat;
}
.rel {
  position: relative;
}
.icontag-hot {
  display: none;
  width: 25px;
  height: 16px;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 66;
}
</style>
